.bannerWraper {
  transform: rotate(14deg);
  width: 600px;
  padding: 20px;

  .banner {
    display: flex;
    margin-top: 20px;
    gap: 20px;
    justify-content: center;
  }

  .bannerItem {
    border: 3px solid #fff;
    border-radius: 16px;
    height: 280px;
    overflow: hidden;
    flex: 0 0 190px;
    position: relative;
    box-shadow: 0 0 20px rgb(0 0 0 / 50%);

    img {
      // position: absolute;
      // width: 104%;
      // height: 104%;
      // object-fit: cover;
      // border-radius: 10px;
      // left: 0;
      // top: 0;
    }
  }

  @media screen and (width <= 400px) {
    padding: 0 10px;
    transform: scale(0.7) rotate(14deg);
    width: 100%;
    height: 140vw;

    .bannerItem {
      flex: 0 0 50vw;
      height: calc(50vw * 29 / 19);
    }
  }

  @media screen and (width > 400px) and (width <= 800px) {
    padding: 0 10px;
    transform: scale(0.7) rotate(14deg);
    width: 100%;
    height: 110vw;

    .bannerItem {
      flex: 0 0 40vw;
      height: calc(40vw * 29 / 19);
    }
  }
}
